<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/floor.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery-ui.css"/>
		<link rel="stylesheet" type="text/css" href="js/easyui/themes/metro/easyui.css"/>
		<link rel="stylesheet" type="text/css" href="css/colorpicker/evol.colorpicker.min.css"/>
		<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/colorpicker/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jscolor/jscolor.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/easyui/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/select-dashed.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/ui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div style="width: 500px;display: none;" id="show_form">
			<form>
				<table class="qikeke-grid">
					<tr>
						<td>名称:</td>
						<td>
							<input name="id" type="hidden" />
							<input name="tName" style="width: 130px;" class="easyui-textbox" type="text" />
							<input name="trIndex" type="hidden" /><!-- tr行的索引 -->
							<input name="tdIndex" type="hidden" /><!-- td列的索引 -->
							<input name="tdSpan" type="hidden" /><!-- td占多少列 -->
							<input name="trSpan" type="hidden" /><!-- tr占多少行 -->
						</td>
						<td>颜色:</td>
						<td>
							<input style="width: 130px;" name="tBgColor" id="tBgColor" value="#0000ffff"/>
						</td>
					</tr>
					<tr>
						<td>图标:</td>
						<td>
							<input style="width: 130px;" name="tIcon" class="easyui-textbox" type="text" />
						</td>
						<td>调用js:</td>
						<td>
							<input style="width: 130px;" name="tJs" class="easyui-textbox" type="text" />
						</td>
					</tr>
					<tr>
						<td>透明度:</td>
						<td>
							<input style="width: 130px;" name="tOpacity" class="easyui-numberspinner" value="100" data-options="min:10,max:100,editable:false">
						</td>
						<td>样式:</td>
						<td>
							<input style="width: 130px;" name="tCssStyle" class="easyui-textbox" type="text" />
						</td>
					</tr>
					<tr>
						<td>ajax调用:</td>
						<td>
							<input name="tIsAjax" class="easyui-switchbutton" checked>
						</td>
						<td>请求方式:</td>
						<td>
							<select style="width: 130px;" panelHeight="auto" class="easyui-combobox" name="tAjaxMethod">
							    <option value="get">GET</option>
							    <option value="post">POST</option>
							    <option value="put">PUT</option>
							    <option value="DELETE">DELETE</option>
							    <option value="patch">PATCH</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>请求地址:</td>
						<td>
							<label>http://</label><input style="width: 130px;" name="tAjaxUrl" class="easyui-textbox">
						</td>
						<td>请求方式:</td>
						<td>
							<select style="width: 130px;" panelHeight="auto" class="easyui-combobox" name="tAjaxMethod">
							    <option value="get">GET</option>
							    <option value="post">POST</option>
							    <option value="put">PUT</option>
							    <option value="DELETE">DELETE</option>
							    <option value="patch">PATCH</option>
							</select>
						</td>
					</tr>
					<tr>
						<td colspan="4" style="text-align: right;padding-right: 10px;border-bottom: 0;">
							<button type="button" onclick="save_td_group(this);" class="button bg-sub">提交</button>
						</td>
					</tr>
				</table>
				
			</form>
		</div>
		<div class="floor-table-box">
			<div class="floor-table-item">
				<table class="floor-table">
					<thead>
						<tr>
							<th class="first-th">
								<a class="row-a" href="javascript:void(0);" onclick="delete_row_click(this);">删除行</a>
								<a href="javascript:void(0);" class="cell-a" onclick="delete_cell_click(this);">删除列</a>
								<a href="javascript:void(0);" class="td-group" onclick="edit_td_group(this);">编辑</a>
								<a href="javascript:void(0);" class="f-t-d-b-a" onclick="f_t_d_b_edit(this);">编辑</a>
							</th>
							<th onmouseenter="first_th_enter(this)" onmouseleave="first_th_leave(this)" onclick="first_th_click(this);"><div>1</div></th>
							<th onmouseenter="first_th_enter(this)" onmouseleave="first_th_leave(this)" onclick="first_th_click(this);"><div>2</div></th>
							<th onmouseenter="first_th_enter(this)" onmouseleave="first_th_leave(this)" onclick="first_th_click(this);"><div>3</div></th>
							<th onmouseenter="first_th_enter(this)" onmouseleave="first_th_leave(this)" onclick="first_th_click(this);"><div>4</div></th>
							<th onmouseenter="first_th_enter(this)" onmouseleave="first_th_leave(this)" onclick="first_th_click(this);"><div>5</div></th>
						</tr>
					</thead>
					<tbody>
						<tr style="display: none;"></tr>
						<tr>
							<td class="first-td" onmouseenter="first_td_enter(this);" onmouseleave="first_td_leave(this);" onclick="first_td_click(this);"><div>1</div></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
						</tr>
						<tr>
							<td class="first-td" onmouseenter="first_td_enter(this);" onmouseleave="first_td_leave(this);" onclick="first_td_click(this);"><div>2</div></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
						</tr>
						<tr>
							<td class="first-td" onmouseenter="first_td_enter(this);" onmouseleave="first_td_leave(this);" onclick="first_td_click(this);"><div>3</div></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
						</tr>
						<tr>
							<td class="first-td" onmouseenter="first_td_enter(this);" onmouseleave="first_td_leave(this);" onclick="first_td_click(this);"><div>4</div></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
							<td onclick="td_click(this);"></td>
						</tr>				
					</tbody>
				</table>
				<div class="floor-table-data">
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function showNotBrowserSuport(){
			document.body.innerHTML='<div class="browser-not-suport"><ul class="b-n-s-title"><li><strong>系统不支持您当前使用的浏览器,请升级后再使用.</strong></li></ul><ul class="b-n-s-list"><li class="b-n-s-recommend">[ 推荐使用以下浏览器 ] ( 点击即可下载 )</li><li>1：<a href="http://dlsw.baidu.com/sw-search-sp/soft/9d/14744/ChromeStandalone_46.0.2490.80_Setup.1445829883.exe" target="_blank">谷歌浏览器</a></li><li>2：<a href="http://dlsw.baidu.com/sw-search-sp/soft/51/11843/Firefox_41.0.2.5765_setup.1444980499.exe" target="_blank">火狐浏览器</a></li><li>3：<a href="http://dlsw.baidu.com/sw-search-sp/soft/b9/14497/UCBrowser_5.5.6125.14_setup.1445234949.exe" target="_blank">UC浏览器</a></li><li>4：<a href="http://down.360safe.com/cse/360cse_8.5.0.116.exe" target="_blank">360极速浏览器(极速模式)</a></li></ul></div>';
		}
		try{
			if($.NV()!='chrome'){
				showNotBrowserSuport();
			}
		}catch(e){
			showNotBrowserSuport();
		}
		
		
		var $click_class = "click";
		var $enter_class = "enter";
		var $current_table = undefined;//当前编辑的table
		var $f_t_d_b = $('<div class="f-t-d-b" onclick="f_t_d_b_click(this);"><form><input name="hObj" type="hidden" /></form></div>');
		var $table_border_top = 2;
		var $table_border_left = 2;
		
		$(function(){
			
			initSelectDashed($('table.floor-table td'));
			$('#tBgColor').colorpicker({
				strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
			});
			$(document).mouseup(function(){
				var isRectangle = coordinate_ver_rectangle($current_table);
			
				if(isRectangle){
					$('thead th.first-th a.td-group',$current_table).fadeIn();//显示操作单元格组合功能
				}else{
					$('thead th.first-th a.td-group',$current_table).hide();//隐藏操作单元格组合功能
				}
			});
		});
		
		function save_td_group(){//保存数据
			var $self = $(arguments[0]);
			var $from = $self.parents('form');
			var form_data = $from.serializeObject();
			var points = get_rectangle_first_point($current_table);
			var point_first = points.first();
			var point_last = points.last();
			var f_t_d_b = $f_t_d_b.clone();
			var css_obj = {};
			if(form_data.tBgColor){
				css_obj['background-color'] = form_data.tBgColor;
			}
			var colspan = point_last.index()-point_first.index();
			var rosspan = point_last.parent().index()-point_first.parent().index();
			css_obj['width'] = 100*(colspan+1)+colspan*$table_border_left;
			css_obj['height'] = 100*(rosspan+1)+rosspan*$table_border_top;
			css_obj['left'] = point_first.position().left;
			css_obj['top'] = point_first.position().top;
			css_obj['opacity'] = 0.9;
			f_t_d_b.css(css_obj);
			f_t_d_b.find('form').find('input[name=hObj]').val(obj2string(form_data));
			$(f_t_d_b).appendTo($current_table.parents('div.floor-table-item').find('div.floor-table-data'));
			
			clear_td_active($current_table);//清除所有td上的active样式 (重新选择)
			$current_table.find('a.td-group').hide();//隐藏编辑功能
			$from.form('reset');
			$from.parent().hide();
			$current_table = undefined;
		}
		
		function f_t_d_b_click(){//组合数据编辑
			var $self = $(arguments[0]);
			var $table = $self.parents('div.floor-table-item').find('table.floor-table');
			$self.attr('active','');
		}
		
		function f_t_d_b_edit(){//组合数据编辑
			var $self = $(arguments[0]);
			var $item = $self.parents('div.floor-table-item div.floor-table-data div[active]');
			$("#show_form").show().find('form').form('load',$item.find());
		}
	
		function first_td_click(){//行序列号点击
			var $self = $(arguments[0]);
			var $self_parent = $self.parent();
			var $table = $self.parents('table');
			clear_th_click($table);//清除th上的$click_class样式
			$('tr',$self.parents('tbody')).not($self_parent).find('td.'+$click_class).removeClass($click_class);
			if($('td:first',$self_parent).hasClass($click_class)){
				$('td',$self_parent).removeClass($click_class);
			}else{
				$('td',$self_parent).addClass($click_class);
			}
			show_row_delete($table);//显示行删除功能
		}
		function first_td_enter(){//行序列号移入
			first_td_e_l(arguments);
		}
		function first_td_leave(){//行序列号移出
			first_td_e_l(arguments);
		}
		function first_td_e_l(){//行序列号通用
			var $self = $(arguments[0]);
			$('td',$self.parent()).toggleClass('enter');
		}
		function clear_td_active(){//清除所有td上的active样式 
			var $table = $(arguments[0]);
			$('tbody td.active',$table).removeClass('active');
		}
		
		function first_th_click(){//列序列号点击
			var $self = $(arguments[0]);
			var $table = $self.parents('table');
			clear_td_click($table);//清除td上的$click_class样式
			
			var $ready_td_th = $table.find('tbody td,thead th').filter(function(){
				return $(this).index()==$self.index();
			});
			if($self.hasClass($click_class)){
				$ready_td_th.removeClass($click_class);
			}else{
				$ready_td_th.addClass($click_class);
			}
			
			$('thead th',$table).not($self).removeClass($click_class);
			
			show_cell_delete($table);//显示列删除功能
		}
		function first_th_enter(){//列序列号移入
			first_th_e_l(arguments);
		}
		function first_th_leave(){//列序列号移出
			first_th_e_l(arguments);
		}
		
		function first_th_e_l(el){//列序列号通用
			var $self = $(arguments[0]);
			var $table = $self.parents('table');
			$('tbody td,thead th',$table).filter(function(){
				return $(this).index()==$self.index();
			}).toggleClass($enter_class);
		}
		function clear_th_click(){//清除th上的click样式
			var $table = $(arguments[0]);
			$('thead th',$table).removeClass($click_class);
		}
		function show_row_delete(){//显示行删除功能
			var $table = $(arguments[0]);
			hide_operator_a_fun($table);
			var $row_a = $table.find('th.first-th a.row-a');
			if($('tbody td.'+$click_class,$table)[0]){
				$row_a.fadeIn();
			}else{
				$row_a.hide();
			}
		}
		
		function get_selected_row(){//获取选中的行
			var $table = $(arguments[0]);
			return $('tbody td.'+$click_class,$table);
		}
		function get_selected_cell(){//获取选中的列
			var $table = $(arguments[0]);
			var tds = [];
			$table.find('thead th.'+$click_class+',tbody td.'+$click_class).each(function(){
				tds.push($(this));
			});
			return tds;
		}
		
		function show_cell_delete(){//显示列删除功能
			var $table = $(arguments[0]);
			hide_operator_a_fun($table);
			var $cell_a = $table.find('th.first-th a.cell-a');
			if($('thead th.'+$click_class,$table)[0]){
				$cell_a.fadeIn();
			}else{
				$cell_a.hide();
			}
		}
		function clear_td_click(){//清除td上的click样式
			var $table = $(arguments[0]);
			$table.find('tbody td.'+$click_class).removeClass($click_class);
		}
		
		function delete_cell_click(){//删除列功能
			var $self = $(arguments[0]);
			var $selected_cell = get_selected_cell($self.parents('table'));//获取选中的行
			$.each($selected_cell, function(index,item) {
				item.remove();
			});
		}
		function delete_row_click(){//删除行功能
			var $self = $(arguments[0]);
			var $selected_row = get_selected_row($self.parents('table'));//获取选中的行
			$selected_row.eq(0).parent().remove();
		}
		
		function td_click(){//td点击
			var $self = $(arguments[0]);
			$table = $self.parents('table');
			
			clear_th_click($table);
			clear_td_click($table);
			hide_operator_a_fun($table);
			
			$self.toggleClass('active');
			var isRectangle = coordinate_ver_rectangle($table);
			
			if(isRectangle){
				$table.find('thead th.first-th a.td-group').fadeIn();//显示操作单元格组合功能
			}else{
				$table.find('thead th.first-th a.td-group').hide();//隐藏操作单元格组合功能
			}
		}
		
		function hide_operator_a_fun(){//隐藏所有操作功能
			var $table = $(arguments[0]);
			$table.find('th.first-th a').hide();
		}
		
		function edit_td_group(){//编辑组合的单元格
			var $self = $(arguments[0]);
			var $table = $self.parents('table');
			$current_table = $table;
			$("#show_form").show();
		}
		
		function get_rectangle_first_point(){
			var $table = $(arguments[0]);
			var isRectangle = coordinate_ver_rectangle($table);
			if(isRectangle){
				return $('tbody td.active',$table);
			}
			return undefined;
		}
		
		function coordinate_ver_rectangle(){//验证是不是矩形
			var $table = $(arguments[0]);
			var coordinate = [];//坐标
			$table.find('tbody tr').each(function(){
				var _el = [];
				var _tr_index = $(this).index();
				$('td.active',$(this)).each(function(){
					_el.push({'tr_index':_tr_index,'td_index':$(this).index()});
				});
				if(_el.length>0){
					coordinate.push(_el);
				}
			});
			if(coordinate.length==1){//单个通过矩形
				var cor_0 = coordinate[0];
				if(cor_0.length==1){
					return true;
				}else if(cor_0.length>1){
					var maxMinArr = [];
					$.each(cor_0, function(index,item) {
						maxMinArr.push(item.td_index);
					});
					maxMinArr.sort();//排序
					if((maxMinArr.pop()-maxMinArr.shift())==cor_0.length-1){
						return true;
					}
				}
			}else if(coordinate.length>1){
				var co_arr = [];
				var cc = [];
				$.each(coordinate, function(i,it) {
					$.each(it, function(index,item) {
						cc.push([item.tr_index,item.td_index]);
					});
					co_arr.push(cc);
					cc = [];
				});
				var first_row_select = co_arr[0];
				var first_row_select_length = first_row_select.length;
				var pa = true;
				$.each(co_arr, function(index,ca) {
					$.each(first_row_select, function(i,it) {
						if(first_row_select_length!=ca.length||it[1]!=ca[i][1]){
							pa = false;
							return false;
						}
					});
					if(!pa)return false;
				});
				if(pa){
					var ca = co_arr[0];
					var maxMinTd = [];
					var maxMinTr = [];
					$.each(ca, function(index,cc) {
						maxMinTd.push(cc[1]);
					});
					maxMinTd.sort();//排序
					$.each(co_arr, function(index,co) {
						maxMinTr.push(co[0][0]);
					});
					maxMinTr.sort();//排序
					if((maxMinTd.length==1?0:(maxMinTd.pop()-maxMinTd.shift()))==ca.length-1&&(maxMinTr.pop()-maxMinTr.shift())==co_arr.length-1){
						return true;
					}
				}
			}
			return false;
		}
	</script>
</html>
